<template>
    <vertical-layout>
<!-- ELEMENTUI - 表格组件 -->
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary" v-on:click='test'>主要按钮(给下列列表行添加点击事件)</el-button>
  <el-button type="success" @click="dialogFormVisible = true">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

        <el-table
          :data="dataList"
          style="width: 100%">
          <el-table-column
            prop="apiNo"
            label="接口编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="serverName"
            label="接口名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="serverUrl"
            label="接口地址">
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>

        <!-- 自定义一个对话框组件 -->
        <!-- <my-dialog></my-dialog> -->

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
    </vertical-layout>
</template>
<script>
/**
 * 引入自定义接口：Layout
 */
import Layout from '@/layout'
import VerticalLayout from '@/layout/VerticalLayout'
import API from '@/api/api.js'
import MyDialog from '@/pages/MyDialog'
export default {
    data() {
        return {
            dataList: [], // 列表数据
            total: 0, // 总条数
            page: 1, // 当前页
            limit: 10, // 每页条数
            gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }],
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
                },
            formLabelWidth: '120px',
        }
    },
    components: {
        Layout,
        MyDialog,VerticalLayout,
    },
    methods: {
        // 接口调用
        getList() {
        let data = {'page': this.page, 'limit': this.limit} //请求参数
        API.login(data).then(res => {
            //请求成功
            console.log('请求成功处理：', res)
            this.dataList = res.data;
            this.total = res.count;

        }).catch(err => {
            //请求失败
        })
        },

        // 分页点击事件
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.limit = val
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            this.getList();
        },


        test() {
        const doms = document.getElementsByClassName('el-table__row');
        console.log(doms)
        /**
         * 本示例演示了JS中传统var定义变量引起的作用域问题（推荐使用ES6语法的let定义变量）
         * var 定义的变量会成为“全局”变量，不受作用域限定，通过闭包函数可以解决此问题
         * 但是如果把var 改为let则问题迎刃而解了
         */

        for(let i =0 ; i < doms.length; i++){
            doms[i].addEventListener('click',function(e){
                console.log('函数1：你点击了第'+i+'行')
            });
        }
        // 上面的函数和下面的函数达到了同样的效果（请注意i的定义）
        for(var i =0 ; i < doms.length; i++){
            doms[i].addEventListener('click',(function(i){
            return function(e){
                console.log('函数2：你点击了第'+i+'行')
            }
            })(i));
        }

        var func;
        if(true){
            func = function(){
            var name = 'why';
                console.log(name)
            }
            func();
        }
        name = 'how'
        func();
        console.log(name);
        },

        //打开一个弹出框
        open() {
            this.$alert('MyForm', '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
            });
        },
        onSubmit() {
            console.log('submit!');
        }
 
    },
    // 页面加载时执行
    created(){
      this.getList();
    }
}
</script>